<link rel="stylesheet" href="/assets/css/theme.css"/>
<div class="layui-card-header">设置主题</div>
<div class="layui-card-body" style="padding: 0;">
    <div class="theme-div">
        <div class="btnTheme">
            <img src="./assets/images/img_theme_1.png" title="黑白主题">
        </div>
        <div class="btnTheme" theme="theme-black" title="黑色主题">
            <img src="./assets/images/img_theme_2.png">
        </div>
        <div class="btnTheme" theme="theme-cyan" title="藏青主题">
            <img src="./assets/images/img_theme_7.png">
        </div>
        <div class="btnTheme" theme="theme-blue-white" title="蓝白主题">
            <img src="./assets/images/img_theme_3.png">
        </div>
        <div class="btnTheme" theme="theme-blue" title="蓝黑主题">
            <img src="./assets/images/img_theme_4.png">
        </div>
        <div class="btnTheme" theme="theme-blue-side" title="蓝色主题">
            <img src="./assets/images/img_theme_5.png">
        </div>
        <div class="btnTheme" theme="theme-white" title="白色主题">
            <img src="./assets/images/img_theme_6.png" style="border-color: #cccccc;">
        </div>
        <div class="btnTheme" theme="theme-green-dark" title="暗绿主题">
            <img src="./assets/images/img_theme_9.png">
        </div>
        <div class="btnTheme" theme="theme-green" title="绿色主题">
            <img src="./assets/images/img_theme_8.png">
        </div>
        <div class="btnTheme" theme="theme-red-white" title="红白主题">
            <img src="./assets/images/img_theme_12.png">
        </div>
        <div class="btnTheme" theme="theme-red-dark" title="暗红主题">
            <img src="./assets/images/img_theme_11.png">
        </div>
        <div class="btnTheme" theme="theme-red" title="红色主题">
            <img src="./assets/images/img_theme_10.png">
        </div>
    </div>

    <div class="layui-form" style="padding: 5px 25px 15px 25px;border-top: 1px solid #e8e8e8;">
        <span style="margin-top: 8px;line-height: 24px;display: inline-block;color: #333;">多标签：</span>
        <div class="pull-right">
            <input type="checkbox" lay-skin="switch" lay-text="开启|关闭" lay-filter="set-tab"
                   id="set-tab" checked>
        </div>
        <div class="layui-clear"></div>
    </div>

    <div>
        <a class="more-menu-item" href="javascript:;" target="_blank">
            <i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档（待开发)
        </a>
        <a class="more-menu-item" href="javascript:;"
           target="_blank">
            <i class="layui-icon layui-icon-theme"></i> 主题生成器（待开发)
        </a>
    </div>
</div>
<script>
    layui.use(['form', 'config', 'index', 'crab'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var config = layui.config;
        var index = layui.index;
        var crab = layui.crab;

        $('#set-tab').prop('checked', config.pageTabs);

        form.render('checkbox');

        form.on('switch(set-tab)', function (data) {
            crab.setPageTabs(data.elem.checked);
            if (data.elem.checked) {
                location.reload();
            } else {
                index.checkPageTabs();
                crab.refresh();
                crab.closePopupRight();
            }
        });

        // 选中缓存主题
        crab.setCurrentTheme();

        // 切换主题
        $('.btnTheme').click(function () {
            crab.switchTheme(this);
        });
    });
</script>